<template>
  <div>
    <el-table size="mini" :data="tableData.tableList" style="width: 100%">
      <template v-for="item in tableData.tableHeader">
        <el-table-column v-if="item.type == 'slot'" :key="item.name" :prop="item.prop" :label="item.label" :min-width="item.width">
          <!-- 匿名插槽 -->
          <!-- <template>
            <slot></slot>
          </template> -->

          <!-- 具名插槽 -->
          <!-- <template>
            <slot :name="item.slotName"></slot>
          </template> -->

          <!-- 作用域 -->
          <template #default="scope">
            <slot :name="item.slotName" :data="scope.row"></slot>
          </template>
        </el-table-column>
        <el-table-column v-else :key="item.name" :type="item.type" :prop="item.prop" :label="item.label" :min-width="item.width"></el-table-column>
      </template>
    </el-table>
    <el-pagination v-if="pageData"
                   background
                   small
                   :current-page="pageData.pageNum"
                   :page-size.sync="pageData.pageSize"
                   @current-change="handleCurrentChange"
                   :total="pageData.total"
                   layout="prev, pager, next ,total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {tableData: Object, pageData: Object},
  emits:['handleCurrentChange'],
  methods: {
    handleCurrentChange(index) {
      this.$emit('handleCurrentChange', index)
    }
  }
}
</script>

<style scoped>

</style>
